<template>
  <pageTool :alertTitle="`共${alertTitle}条记录`">
    <template #left>
      <el-form style="display: flex; flex-wrap: wrap;" ref="enterpriseform" :rules="enterpriseRules" :model="enterpriseForm" label-width="80px">
        <el-form-item label="标签名称">
          <el-input v-model="enterpriseForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="enterpriseForm.province" placeholder="请选择" @change="changeFn">
            <el-option
            v-for="(item, index) in provincesList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="enterpriseForm.city" placeholder="请选择">
            <el-option
            v-for="(item, index) in citysList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="enterpriseForm.shortName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="enterpriseForm.state" placeholder="请选择">
            <el-option
              v-for="item in statelist"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="onDelect">清除</el-button>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </template>
    <template #default>
      <el-button type="success" @click="onAdduser">新增用户</el-button>
    </template>
    <template #conter>
       <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading">
        <el-table-column
          align="center"
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="企业编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="shortName"
          label="企业简称">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>
        <el-table-column
          align="center"
          prop="creatorID"
          label="创建者">
        </el-table-column>
        <el-table-column
          align="center"
          prop="addDate"
          label="创建日期">
          <template #default="{row}">
          {{row.addDate | timeFilters}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="remarks"
          label="备注">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          label="状态">
          <template #default="{row}">
            {{row.state===1? '启用' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template #default="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(row.id)"></el-button>
             <!-- 点击启用 -->
            <el-button type="success" icon="el-icon-check" circle @click="onenable(row.id, 1)" v-if="row.state===0"></el-button>
            <!-- 点击禁用 -->
            <el-button type="success" icon="el-icon-close" circle @click="ondisable(row.id, 0)" v-else></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="ondelect(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pagesize"
        layout=" prev, pager, next, jumper, sizes"
        :total="alertTitle">
      </el-pagination>
      <enterpriseDialog :visible.sync="visible" :differenttitle="differenttitle" @refresh="EnterpriseList()" :selectId="selectId"/>
    </template>
  </pageTool>
</template>

<script>
import pageTool from '@/utils/pageTool'
import { findEnterpriseList, delectEnterprisedetails,EnterpriseState } from '@/api/enterprise' 
import enterpriseDialog from './components/enterpriseDialog'
import { provinces, citys } from '@/api/citys'
export default {
  name: 'enterprisePage',
  components: {
    pageTool,
    enterpriseDialog
  },
  data () {
    return {
      alertTitle: 0,
      // 企业管理form表单
      enterpriseForm: {
        tags: '',
        city: '',
        province: '',
        shortName: '',
        state: ''
      },
      enterpriseRules: {},
      tableData: [],
      query: {
        page:1,
        pagesize: 10
      },
      visible:false,
      differenttitle: false,
      provincesList: provinces(), // 城市
      citysList: [],
      statelist: [
        { label: '启用',
          value: 1
        },
        { label: '禁用',
          value: 0
        }
      ],
      selectId: 0,
      loading: false
    }
  },
  created () {
    this.EnterpriseList()
  },
  methods: {
    // 获取企业管理列表
    async EnterpriseList () {
      this.loading= true
      const { items, counts } = await findEnterpriseList(this.query)
      this.tableData = items
      this.alertTitle = counts
      this.loading = false
    },
    // 分页
    handleSizeChange(val) {
      this.query.pagesize = val
      this.EnterpriseList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.EnterpriseList()
    },
    // 添加
    onAdduser () {
      this.differenttitle = false
      this.visible = true
    },
    // 编辑
    onEdit (id) {
      this.selectId = id
      this.differenttitle = true
      this.visible = true
    },
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.enterpriseForm.province)
    },
    // 点击取消
    ondelect (id) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await delectEnterprisedetails(id)
          this.$message({
            type: 'success',
            message: '已成功删除!'
          });
          this.EnterpriseList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 调用状态接口
    async postEnterpriseState (id,state) {
      await EnterpriseState(id, state)
      this.EnterpriseList()
    },
    // 点击启用
    onenable (id,state) {
      this.$confirm('已成功启用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已成功启用!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启用'
          })
        })
      this.postEnterpriseState(id,state)
    },
    // 点击禁用
    ondisable (id, state) {
      this.$confirm('已成功禁用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已成功禁用!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      this.postEnterpriseState(id,state)
    },
    // 搜索
    async onSearch () {
      const { items, counts } = await findEnterpriseList({...this.query, ...this.enterpriseForm})
       this.tableData = items
      this.alertTitle = counts
    },
    // 清空搜索
    onDelect () {
      this.enterpriseForm = {}
      this.EnterpriseList()
    }
  }
}
</script>

<style>

</style>